<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>特价尾货</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    header {
      width: 640px;
      height: 80px;
      background-color: rgb(246, 243, 239);
      margin: 0 auto;
      text-align: center;
      font-size: 22px;
      line-height: 80px;
      color: #444;
      margin-top: 30px;
      border-radius: 10px 10px 0 0;
    }

    header p:hover {
      color: darkred;
      cursor: pointer;

    }

    main {
      width: 640px;
      height: 800px;
      margin: 0 auto;
      cursor: pointer;
    }

    main img {
      width: 640px;
      height: 717px;
    }
    .select1{
      width: 640px;
      height: 60px;
      margin: 0 auto;
      background-color: bisque;
      display: flex;
      justify-content: space-around;
      padding-top: 10px;
    }
    .select1 select{
      width: 200px;
      height: 50px;
      border-radius: 10px;
      border: 1px solid #ccc;
      text-align: center;
      font-size: 18px;
      outline: none;
    }
 

.zhuliang {
  width: 1200px;
  height: 30px;
  margin: 0 auto;
  font-size: 22px;
}

.zhuliang :nth-child(1) {
  float: left;
}

.zhuliang :nth-child(2) {
  float: right;
  font-size: 18px;

}

.zhuliang a:hover {
  color: green;
  border-bottom: 1px solid green;
}

.food_main {
  width: 640px;
  height: 330px;

  margin: auto;
}

#product {
  display: block;
  width: 640px;
  height: 300px;

  display: flex;
  justify-content: space-around;
}

#product li :hover {
  width: 200px;
  height: 250px;
}

#product2 li :hover {
  width: 200px;
  height: 250px;
}

#product2 {
  display: block;
  width: 640px;
  height: 300px;

  display: flex;
  justify-content: space-around;
}

#product li img {
  width: 100px;
  height: 150px;
  border-radius: 10px;
}

#product2 li img {
  width: 100px;
  height: 150px;
  border-radius: 10px;

}

#product p {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  width: 100px;
  height: 25px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;

}

#product2 p {
  display: block;
  overflow: hidden;
  margin-top: 10px;
  width: 100px;
  height: 25px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;

}

#product span {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 70px;
  height: 30px;
  color: brown;
  border-radius: 10px;

}
li{
  list-style: none;
}
#product2 span {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 70px;
  height: 30px;
  color: brown;
  border-radius: 10px;

}

.shoplogo {
  width: 640px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  padding: 20px;
}

.shoplogo img {
  width: 70px;
  height: 54px;
  border: 1px solid #787575;
}


  </style>
</head>

<body>
  <header>
    <p>狗狗用品价格-宠物清仓特价</p>
  </header>
  <main>
    <img src="https://img2.epetbar.com/2021-11/01/16/0af686a04ae53da282e65b84e5a8ccc4.jpg?x-oss-process=style/water"
      alt="">
    <div class="select1">
      <select>
        <option>狗粮零食</option>
        <option>临期食品</option>
        <option>宠物驱虫</option>
        <option>清新喷雾</option>
      </select>
      <select>
        <option>清仓类型</option>
        <option>临期食品</option>
        <option>宠物驱虫</option>
        <option>清新喷雾</option>
      </select>
      <select>
        <option>商品产地</option>
        <option>进口</option>
        <option>国产</option>
      </select>
    </div>
  </main>
  

  <div class="dog_main">
    <div class="food_main">
    <ul id="product">
    </ul>
    </div>
    <div class="food_main">
      <ul id="product2">
      </ul>
      </div>
      <div class="shoplogo">
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/04.jpg"></a></span>
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/05.jpg"></a></span>
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/06.jpg"></a></span>
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/05.jpg"></a></span>
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/06.jpg"></a></span>
    <span><a href="https://www.epet.com/brand/bd725.html"><img src="../img/03.jpg"></a></span>
      </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script>
       let oMain = document.querySelector(".food_main")
        let oUl = document.getElementById("product");
        let oUl2 = document.getElementById("product2");
        const baseUrl = " http://localhost:8888";
        ajax({
          url: baseUrl + "/goods/list",
          type: "get",
          params: { current: 88, pagesize: 5 },
          fn(resData) {
            console.log(JSON.parse(resData));
            resData = JSON.parse(resData);
            let html = "";
            resData.list.forEach((o) => {
              html += `
              <li>
                  <a href="./07detail.html?pid=${o.goods_id}"><img src="${o.img_big_logo}"/></a>
                  <p>${o.title}</p>
                  <p><span>￥${o.price}</span></p>
                 
                  </li>
              
              `;
            });
            oUl.innerHTML = html;
            oUl2.innerHTML = html;
          },
        });


       

    </script>
</body>

</html>